<template>
  <div>
    <p>图片上传</p>
    <el-upload 
        list-type="picture" 
        :action="fileUpload" 
        :headers="headers"
        :file-list="fileList"
        :on-success="uploadSuccess"
        :before-remove="removeUploadFile"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <br>
    <hr>
    <br>
    <quill-editor class="goods-editor" v-model="goodDetail"></quill-editor>
    <hr>
    <el-button type="primary" size="default" @click="addGoods()">添加商品</el-button>
    
  </div>
</template>
<script>
export default {
    data(){
        return {
            fileUpload:process.env.VUE_APP_AJAX_URL + this.$URL.uploadFile,
            fileList:[],
            goodDetail:""
        }
    },
    computed:{
        headers(){
            return {
                Authorization:this.$store.state.token
            }
        }
    },
    methods:{
        uploadSuccess(response,file,fileList){
            console.log(response,file,fileList);
            let { data,meta } = response;
            if(meta.status>=400){
                this.fileList = [ ...this.fileList ];
                this.$message.error("文件上传失败")
                return;
            }
            console.log("上传成功",data);
            this.fileList = fileList;
        },
        removeUploadFile(file,fileList){
            console.log(file,fileList);
            this.fileList = fileList;
            return true
        },
        addGoods(){
            let pics = [];
            for (let item of this.fileList) {
                pics.push({
                    pic:item.response.data.tmp_path
                })
            }
            console.log(pics);
            console.log("产品详情",this.goodDetail);
        }
    }
}
</script>

<style lang="less" scoped>
.goods-editor :deep(.ql-editor){
    min-height: 300px;
    max-height: 600px;
}
</style>